/**
 * Created with  SublimeText
 * @Author:      Lyle
 * @DateTime:    2017-10-26 14:48:43
 * @Description: 
 */
/**
 * Created with  SublimeText
 * @Author:      Lyle
 * @DateTime:    2017-10-20 16:59:47
 * @Description: 
 */
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
import { TransitionGroup, CSSTransition } from 'react-transition-group'

import { Provider } from 'react-redux';

import configureStore from '../store/configureStore'

import Home from './../containers/Home';
import Login from './../components/login/Login';
import NotFound from './../components/notFound/NotFound';
import Space from './../components/space/Space';

//test
import Test from './../components/test/Test';

const store = configureStore();

//console.log(28, store);
/*
 * React Router v4 + react-transition-group
 * https://medium.com/@pshrmn/a-shallow-dive-into-react-router-v4-animated-transitions-4b73f634992a
 * https://reactcommunity.org/react-transition-group/
 */

const Auth = {
  
  isAuthenticated: true,

  authenticate() {
    this.isAuthenticated = true
  },

  signout() {
    this.isAuthenticated = false
  }

}

const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render = {function(props) {
            if (Auth.isAuthenticated) {
               return (<Component {...props}/>)
            } else {
               return (<Space {...props}/>)
               //return (<Redirect to={{pathname: '/login', state: { from: props.location }}}/>) 
            }
        }}
    />
)


class Routers extends Component {
    render() {
        return (
            <Provider store={store}> 
                <Router>
                    <Route render={({location}) => (
                        <TransitionGroup>
                            <CSSTransition
                              key={location.key}
                              classNames='fade'
                              timeout={{enter: 300, exit: 0}}
                            >
                                <Switch location={location}>
                                    <Route exact path="/" render={(props) => { 
                                        return(<Home {...props} test='test' />)}
                                    }/>
                                    <Route exact path="/login" component={Login}/>
                                    <PrivateRoute exact path="/test" component={Test}/>
                                    <Route component={NotFound}/>
                                </Switch>
                            </CSSTransition>
                        </TransitionGroup>
                    )}/>
              </Router>
            </Provider>
        )
    }
};

export default Routers;